<template>
    <div class="depeart">

        <el-dialog :close-on-click-modal="false" title="部门列表" :visible.sync="dialogVisible" width="50%"
            :before-close="handleClose">
            <!-- 文字过滤 -->
            <div class="fx" style="align-items: center;">
                <el-input size="medium" placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
                <el-button class="mgl-20" size="medium" @click="searchValue()">查询</el-button>
            </div>
            <!-- 树形结构 -->
            <!-- :default-expanded-keys="[2, 3]" 默认展开id为2和3的标签 -->
            <!-- :default-checked-keys="[5]" 默认选中的key -->
            <!-- default-expand-all -->
            <div class="departTitle mgt-10">
                <span>部门</span>
                <span>部门领导</span>
            </div>
            <VuePerfectScrollbar class="bg-content pdl-5 pdr-5 pdb-10" style="width:99%;height:450px">
                <el-tree v-loading="loading" ref="tree" :data="departList" show-checkbox node-key="id"
                    :check-strictly="true" 
                    :default-expanded-keys="['00370000000000000000']" 
                    class="filter-tree mgt-20"
                    :default-checked-keys="defKeys"
                    :filter-node-method="filterNode" 
                    :props="defaultProps">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                          <span>{{ data.name }}</span>
                          <span>{{ data.depLeaderName? data.depLeaderName:'暂无' }}</span>
                    </span>
                </el-tree>
            </VuePerfectScrollbar>
            <div class="btn-list bgc-white tc mgt-30">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="warning" class="bgc-blue1" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import VuePerfectScrollbar from 'vue-perfect-scrollbar';
export default {
    props: {
        departList: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            defKeys:[],
            dialogVisible: false,
            data: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            filterText: '',
            // treeData:[],
            loading: false
        }
    },
    components: {
        VuePerfectScrollbar
    },
    watch: {
        //   filterText(val) {
        //     this.$refs.tree.filter(val);
        //   }
    },
    // created(){
    //     this.$nextTick(()=>{
    //         this.getDepartTree();
    //     })
    // },
    methods: {
        // 
        handleClose() {
            var selectInfo = this.$refs.tree.getCheckedNodes();
            console.log(selectInfo);
            var param = {};
            var orgId = [];
            var orgName = [];
            selectInfo.forEach(function (item) {
                orgId.push(item.orgId)
                orgName.push(item.name)
            })
            param.orgId = orgId;
            param.orgName = orgName;
            console.log(param);
            this.$emit("closeAdd", param);
            this.dialogVisible = false;
        },
        // 确认
        confirm() {
            this.dialogVisible = false;
            this.handleClose()
        },
        searchValue() {
            this.$refs.tree.filter(this.filterText);
            this.$refs.tree.setCheckedKeys([]);
        },
        // 过滤节点
        filterNode(value, data) {
            this.loading = true;
            setTimeout(() => {
                this.loading = false;
            }, 2000);
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        initData(data) {
            this.dialogVisible = true;
            this.filterText = '';
            this.$nextTick(() => {
                this.searchValue();
                this.$refs.tree.setCheckedKeys([]);
                this.defKeys = data.defKeys
            })
        },
        getCheckedNodes() { // 通过node获取
            console.log(this.$refs.tree.getCheckedNodes());
        },
        getCheckedKeys() { // 通过key获取
            console.log(this.$refs.tree.getCheckedKeys());
        },
        setCheckedNodes() {
            this.$refs.tree.setCheckedNodes([{
                id: 5,
                label: '二级 2-1'
            }, {
                id: 9,
                label: '三级 1-1-1'
            }]);
        },
        setCheckedKeys() {
            this.$refs.tree.setCheckedKeys([3]);
        },
        resetChecked() {
            this.$refs.tree.setCheckedKeys([]);
        }
    }
};
</script>

<style lang="scss" scoped>
.btn-list {
    position: absolute;
    width: 96%;
    bottom: 0;
    padding: 20px 0;
    z-index: 999;
    border-top: 1px solid #ccc;
}

.el-input {
    width: 500px;
}
.departTitle{
    display: flex;
    justify-content: space-between;
    padding: 5px 20px;
    border-bottom: 1px solid #efefef;
    background: rgb(242, 248, 255);
    color: rgb(50, 128, 252);
}
.custom-tree-node{
    display: flex;
    justify-content: space-between;
    width: 87%;
}
.depeart .el-tree{
    margin-top: 0px !important;
}
</style>